<!--故障记录-->
<template>
  <div>
    <div style="padding-bottom: 50px">
      <div style="float: left;margin-left: 200px">
        <el-input
          placeholder="请输入内容"
          v-model="searchValue"
          clearable
          style="width: 300px" @change="searchChange">
        </el-input>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </div>
      <div style="float: left;margin-left: 50px">
        <el-select v-model="faultStatusValue" @change="selChange" clearable placeholder="按状态查询">
          <el-option key="0" value="0" label="待修复"></el-option>
          <el-option key="1" value="1" label="修复中"></el-option>
          <el-option key="2" value="2" label="已修复"></el-option>
          <el-option key="3" value="3" label="无法修复"></el-option>
        </el-select>
      </div>
      <div class="block" style="float: left;margin-left: 50px">
        <el-cascader
          v-model="cascadeValue"
          :options="hospitals"
          :props="myProps"
          @change="handleChange" clearable placeholder="级联查询"></el-cascader>
      </div>
      <div style="float: left;margin-left: 200px">
        <el-button type="primary" @click="showAdd" plain>新增故障</el-button>
      </div>
      <div style="float: left;margin-left: 20px">
        <el-button type="warning" @click="acceptFailure" plain>受理故障</el-button>
      </div>
      <div style="float: left;margin-left: 20px">
        <el-button type="danger" @click="cancelFailure" plain>撤销故障</el-button>
      </div>
    </div>
    <!--表格数据-->
    <el-table
      :data="pageInfo.list"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" prop="maid"></el-table-column>
      <el-table-column prop="maid" label="编号"></el-table-column>
      <el-table-column prop="matype" label="故障类型"></el-table-column>
      <el-table-column prop="madesc" label="故障描述"></el-table-column>
      <el-table-column prop="bid" label="床位ID"></el-table-column>
      <el-table-column prop="declarantName" label="申报人姓名"></el-table-column>
      <el-table-column prop="declarantPhone" label="申报人手机号"></el-table-column>
      <el-table-column prop="declarantTime" label="故障备案时间"></el-table-column>
      <el-table-column prop="declarantStatus" label="故障状态">
        <template slot-scope="scope">
          <span v-if="scope.row.declarantStatus == 0" style="color: orange">待维修</span>
          <span v-if="scope.row.declarantStatus == 1" style="color: #295fce">修复中</span>
          <span v-if="scope.row.declarantStatus == 2" style="color: green">已修复</span>
          <span v-if="scope.row.declarantStatus == 3" style="color: red">无法修复</span>
        </template>
      </el-table-column>
      <el-table-column label="操作项">
        <template slot-scope="scope">
          <el-link icon="el-icon-edit" type="warning" @click="showUpdate(scope.row)">修改</el-link>
          <el-link type="primary" @click="showInfo(scope.row)">查看详情</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!--分页导航-->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageNum"
        :page-sizes="[5, 15, 30, 50]"
        :page-size="pageInfo.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total">
      </el-pagination>
    </div>

    <!--模态框-->
    <el-dialog :title="title" :visible.sync="faultVisible">
      <el-form :model="faultRecord" label-width="80px" class="demo-doctor">
        <el-form-item label="故障类型">
          <el-input v-model="faultRecord.matype"></el-input>
        </el-form-item>
        <el-form-item label="故障描述">
          <el-input v-model="faultRecord.madesc"></el-input>
        </el-form-item>
        <el-form-item label="床位ID">
          <el-select v-if="faultRecord.maid != undefined" disabled v-model="faultRecord.bid" placeholder="请选择床位">
            <el-option
              v-for="bed in noFaultBed"
              :key="bed.bid"
              :label="bed.bid"
              :value="bed.bid">
            </el-option>
          </el-select>
          <el-select v-else v-model="faultRecord.bid" placeholder="请选择床位">
            <el-option
              v-for="bed in noFaultBed"
              :key="bed.bid"
              :label="bed.bid"
              :value="bed.bid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申报人姓名">
          <el-input v-model="faultRecord.declarantName"></el-input>
        </el-form-item>
        <el-form-item label="申报人电话">
          <el-input v-model="faultRecord.declarantPhone"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="execute()">提交</el-button>
          <el-button @click="faultVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  cancelFailure,
  execute,
  getAllFault,
  getAllFaultById,
  search,
  showAdd,
  getAllFaultByCascade,
  acceptFailure
} from "../api/fault.js";

export default {
  data() {
    return {
      cascadeValue: [],
      myProps: {
        value: 'id',
        label: 'name',
        children: 'tbDepartments',
        expandTrigger: 'hover'
      },
      pageInfo: {
        pageNum: "1",
        pageSize: "5",
        total: "",
        list: []
      },
      faultRecord: {declarantName: '', declarantPhone: ''},
      faultVisible: false,
      title: '',
      noFaultBed: [],
      searchValue: '',
      faultStatusValue: '',
      hospitals: [],
      faultSection: [],
      maids: [],
      bids: []
    }
  },
  methods: {
    getAllFault() {
      getAllFault(
        {pageNum: this.pageInfo.pageNum, pageSize: this.pageInfo.pageSize, faultStatusValue: this.faultStatusValue}
      ).then(res => {
        if (res.data.msg == '没有数据') {
          this.pageInfo.list = ''
          this.pageInfo.total = ''
        } else {
          this.pageInfo.list = res.data.data.pageInfo.list;
          this.pageInfo.pageNum = res.data.data.pageInfo.pageNum;
          this.pageInfo.pageSize = res.data.data.pageInfo.pageSize;
          this.pageInfo.total = res.data.data.pageInfo.total;
          this.hospitals = res.data.data.hospitals;
        }
      })
    },
    //当前页发生改变
    handleCurrentChange(val) {
      this.pageInfo.pageNum = val;
      this.getAllFault();
    },
    //每页记录数发生改变
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.getAllFault();
    },
    //显示增加模态框
    showAdd() {
      showAdd().then(res => {
        if (res.data.code == 200) {
          this.faultRecord = {declarantName: '', declarantPhone: ''};
          this.title = '增加故障记录';
          this.faultVisible = true;
          this.faultRecord.declarantName = res.data.data.sectionInfo.sname
          this.faultRecord.declarantPhone = res.data.data.sectionInfo.tbUser.phone
          this.noFaultBed = res.data.data.noFaultBed;
        }
      })
    },
    //显示修改模态框
    showUpdate(row) {
      getAllFaultById(row.maid).then(res => {
        if (res.data.code == 200) {
          this.faultRecord = res.data.data
          this.title = '修改故障记录';
          this.faultVisible = true;
        }
      })
    },
    //提交表单
    execute() {
      let url = ''
      if (this.faultRecord.maid == undefined) {
        url = '/fault/addFault'
      } else {
        url = '/fault/updateFault'
      }
      execute(url, this.faultRecord).then(res => {
        if (res.data.code == 200) {
          this.$message.success("操作成功")
        } else {
          this.$message.error("操作失败")
        }
        this.faultVisible = false;
        this.getAllFault();
      })
    },
    //搜索框查询
    search() {
      search(
        {pageNum: this.pageInfo.pageNum, pageSize: this.pageInfo.pageSize, searchValue: this.searchValue}
      ).then(res => {
        this.pageInfo.list = res.data.data.list;
        this.pageInfo.pageNum = res.data.data.pageNum;
        this.pageInfo.pageSize = res.data.data.pageSize;
        this.pageInfo.total = res.data.data.total;
      })
    },
    //搜索框值改变
    searchChange() {
      if (this.searchValue == '') {
        this.getAllFault()
      }
    },
    //下拉框变化
    selChange() {
      this.getAllFault();
    },
    //查看床位详情
    showInfo(row) {
      this.$router.push({path: '/ShowBedInfo', query: {bedInfo: row.tbBed}})
    },
    //级联查询
    handleChange() {
      if (this.cascadeValue == '') {
        this.getAllFault()
        return;
      }
      getAllFaultByCascade(
        {pageNum: this.pageInfo.pageNum, pageSize: this.pageInfo.pageSize, cascadeValue: this.cascadeValue}
      ).then(res => {
        if (res.data.msg == '没有数据' || res.data.msg == '403') {
          this.pageInfo.list = '';
          this.pageInfo.total = '';
        } else {
          this.pageInfo.list = res.data.data.list;
          this.pageInfo.pageNum = res.data.data.pageNum;
          this.pageInfo.pageSize = res.data.data.pageSize;
          this.pageInfo.total = res.data.data.total;
        }
      })
    },
    //复选框
    handleSelectionChange(val) {
      this.faultSection = []
      for (const valElement of val) {
        this.faultSection.push(valElement);
      }
    },
    //批量受理故障
    acceptFailure() {
      if (this.faultSection.length == 0) {
        this.$message.warning("请至少选择一项")
        return
      }
      for (let i = 0; i < this.maids.length; i++) {
        if (this.faultSection[i].declarantStatus != '0') {
          this.$message.warning("勾选的故障已经被受理了")
          return
        }
      }
      this.$confirm(
        '你确定要受理吗',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
        for (let i = 0; i < this.faultSection.length; i++) {
          this.maids.push(this.faultSection[i].maid);
        }
        acceptFailure(
          {maids: this.maids}
        ).then(res => {
          if (res.data.code == 200) {
            this.$message.success("操作成功")
          }
          this.getAllFault();
        })
      }).catch(() => {

        }
      )
    },
    //批量撤销故障
    cancelFailure() {
      if (this.faultSection.length == 0) {
        this.$message.warning("请至少选择一项")
        return
      }
      for (let i = 0; i < this.faultSection.length; i++) {
        if (this.faultSection[i].declarantStatus != '0') {
          this.$message.warning("勾选的故障已经被受理了，不可撤销")
          return
        }
      }
      this.$confirm(
        '你确定要撤销吗',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
        for (let i = 0; i < this.faultSection.length; i++) {
          this.maids.push(this.faultSection[i].maid)
          this.bids.push(this.faultSection[i].bid)
        }
        cancelFailure(
          {maids: this.maids, bids: this.bids}
        ).then(res => {
          if (res.data.code == 200) {
            this.$message.success("操作成功")
          }
          this.getAllFault();
        })
      }).catch(() => {

        }
      )
    }
  },
  created() {
    this.getAllFault();
  }
}
</script>
